<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/shootingBase.css">

</head>

<body>
    <!-- 头部 -->
    <header>
        <main>
            <!-- logo  -->
            <h1><img src="../images/longWebPages/logo.jpg" alt=""></h1>
            <!-- 头部右侧 -->
            <div class="header_right">
                <!-- 右上 -->
                <div class="header_right_top">
                    <!-- 搜索框 -->
                    <form action="">
                        <input type="text" value="SEARCH">
                        <i class="iconfont">&#xe60c;</i>

                    </form>
                    <!-- 登录注册 -->
                    <div class="submit">
                        <a href="">登录</a>
                        <em>/</em>
                        <a href="">注册</a>
                    </div>

                </div>
                <!-- 导航栏 -->
                <ul class="nav">
                    <li><a href="">首页</a></li>
                    <li class="active"><a href="">拍摄基地</a></li>
                    <li><a href="">真实客照</a></li>
                    <li><a href="">选择影师</a></li>
                    <li><a href="">礼服妆容</a></li>
                    <li><a href="">公司简介</a></li>
                </ul>

            </div>
        </main>
    </header>
    <!-- 轮播图 -->
    <div id="carousel">
        <div class="carousel_img">
            <img class="active" src="../images/FirstSubpages/banner1.jpg" alt="">
            <img src="../images/FirstSubpages/banner2.jpg" alt="">
            <img src="../images/FirstSubpages/banner3.jpg" alt="">
            <img src="../images/FirstSubpages/banner4.jpg" alt="">
        </div>
        <img src="../images/FirstSubpages/banner4.jpg" alt="">
        <button>
            < </button>
                <button> > </button>

                <ul class="ul">
                    <li class="active" imageV="0"></li>
                    <li imageV="1"></li>
                    <li imageV="2"></li>
                    <li imageV="3"></li>
                </ul>
    </div>

    <!-- 拍摄基地 -->
    <div id="base">
        <main>
            <div class="nav_border">
                <ul class="nav">
                    <li>首页:</li>
                    <li><em>拍摄基地</em><i class="iconfont">&#xe625;</i></li>
                    <li><em>湖畔公主馆</em><i class="iconfont">&#xe625;</i></li>
                    <li><em class="active">卢森堡长廊</em></li>
                </ul>
            </div>
            <!-- 左边选项卡 -->
            <div class="select">
                <!-- 标题 -->
                <h2>
                    <em>拍摄基地</em>
                    <p></p>
                    <p></p>
                </h2>

                <h4 class="active"><em>湖畔公主馆</em><span>-</span></h4>
                <div class=" active">
                    <h5 class="active">卢森堡长廊</h5>
                    <h5>星辰水晶教堂</h5>
                    <h5>圣恩教堂</h5>
                    <h5>依云湖</h5>
                </div>
                <h4><em>夏光.星朵</em><span>+</span></h4>
                <div>
                    <h5 class="active">卢森堡长廊</h5>
                    <h5>星辰水晶教堂</h5>
                    <h5>圣恩教堂</h5>
                    <h5>依云湖</h5>
                </div>
                <h4><em>秘密花园</em><span>+</span></h4>
                <div>
                    <h5 class="active">卢森堡长廊</h5>
                    <h5>星辰水晶教堂</h5>
                    <h5>圣恩教堂</h5>
                    <h5>依云湖</li>
                </div>
                <h4><em>梦幻空间</em><span>+</span></h4>
                <div>
                    <h5 class="active">卢森堡长廊</h5>
                    <h5>星辰水晶教堂</h5>
                    <h5>圣恩教堂</h5>
                    <h5>依云湖</h5>
                </div>




            </div>
            <!-- 边框部分 -->
            <div class="border">
                <!-- 小框 -->
                <div class="mini">
                    <p class="luxe">卢森堡长廊</p>
                    <p>LUXEMBURG CORRIDOR</p>
                </div>
                <!-- 边框里面的文字 -->
                <div class="text">
                    <p>卢森堡公园（法语:JARDIN
                        DULUXEMBOURG)是一座处于巴黎第六区，拉丁区中央的公园，于1612年玛丽·德·美第奇的统治下建成。卢森堡公园面积为224,500平方米，有巨大的梧桐大道与花园﹑喷泉，以及许多上古智者的雕像，还有皇帝的别宫卢森堡宫(PALAIS
                        DU LUXEMBOURG)，是国会议员的宿舍。
                    </p>
                    <p>卢森堡公园还与亨利四世有关，但比浮日广场晚些，公园内的宫殿是亨利四世被刺后为玛丽皇后建造的不知道这位皇太后会不会也像中国的那些年轻的太后们一样对于权力很感兴趣，只是看到一个略大于街心花园的树丛、塑像、有棱角的小径、散落在各个角落里的座椅组成的公园。
                    </p>
                    <p>以前读过陈从周的一篇谈中国园林变成公众游览地后的接待困难的文章，内中分析了私家园林和公众园林区别，今天算是在这儿映证了。整个卢森堡公园向四面八方敞开，园中的道路是平直的，树冠很高增加了视觉的通透性，中央水池和花坛周围有大量的空地。
                    </p>
                </div>
            </div>
            <!-- 灰色方块 -->
            <div class="gray"></div>
            <!-- 图片 -->
            <div class="picture">
            </div>
            <!-- 点击图片 -->
            <div class="bottom">
                <i class="iconfont">&#xe628;</i>
                <div> <img src="../images/FirstSubpages/luxe_one.jpg" alt="">
                    <h3>点击观看</h3>
                </div>
                <div><img src="../images/FirstSubpages/luxe_two.jpg" alt="">
                    <h3>点击观看</h3>
                </div>
                <div> <img src="../images/FirstSubpages/luxe_one.jpg" alt="">
                    <h3>点击观看</h3>
                </div>
                <i class="iconfont">&#xe625;</i>
            </div>

        </main>
    </div>
    <!-- 底部 -->
    <footer>
        <main>
            <p>COPYRIGHT 2009-2017 版权所有 重庆金夫人实业有限公司增值电信业务许可证: 渝ICP备11007647号-13技术支持: 成都岸境科技</p>
        </main>
    </footer>



    <script>
        //选项卡

        //找到所有的大标题h4
        var h4s = document.getElementsByTagName("h4");
        // 找到右边的nav
        var nav = document.getElementsByClassName("nav")[1];

        //找到每一块h4对应的所有的h5
        var h5s = document.getElementsByTagName("h5");

        //找到小框里面的文字
        var luxe = document.getElementsByClassName("luxe")[0];


        //遍历h4,为所有的h4绑定点击事件
        for (var i = 0; i < h4s.length; i++) {
            h4s[i].onclick = function () {

                // 点击h4,nav的最后一个儿子的前一个兄弟的innerHtml变成了h4的内容
                nav.lastElementChild.previousElementSibling.firstElementChild.innerHTML = this.lastElementChild.previousElementSibling.innerHTML;

                for (var i = 0; i < h4s.length; i++) {
                    //清空active
                    h4s[i].className = "";
                    //关起来
                    h4s[i].nextElementSibling.style.display = "none"
                    //符号变为+
                    h4s[i].lastElementChild.innerHTML = "+"
                }
                this.className = "active"//点击后active



                // 开关门
                if (this.lastElementChild.innerHTML == "+") {
                    this.nextElementSibling.style.display = "block";
                    this.lastElementChild.innerHTML = "-"
                } else {
                    this.nextElementSibling.style.display = "none"
                    this.lastElementChild.innerHTML = "-"
                    this.lastElementChild.innerHTML = "+"
                }
            }

        }

        //遍历h5为所有的h5绑定点击事件，
        for (var j = 0; j < h5s.length; j++) {
            h5s[j].onclick = function () {
                //点击h5后 右边nav的最后一个儿子的innerHtml就变成了此次点击元素的innerHTML
                nav.lastElementChild.lastElementChild.innerHTML = this.innerHTML;



                //清空active
                for (var j = 0; j < h5s.length; j++) {
                    h5s[j].className = ""
                }
                luxe.innerHTML = this.innerHTML;
                //点击就设置active(写在这里的原因是因为，点击过后清空active,再设置active)
                this.className = "active"
            }

        }







    </script>
</body>

<script src="../js/shootingBase.js"></script>

</html>